﻿<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   <xsl:template match="/">
      <html>
         <head>
            <style type="text/css">
               <!-- The "Stroke Order Diagram" font from Tim Eyre (http://sites.google.com/site/nihilistorguk/) -->
               @font-face {
               font-family: KanjiStrokeOrders;
               src: url(KanjiStrokeOrders_v2.014.ttf);
               }

               <!-- 
            CSS-based tooltips, described here:  http://psacake.com/web/jl.asp
            I think the CSS-only solution ran into difficulty due to some interaction between IE & the XSLT & JS.
            Work around is to use JS.
                -->
               span.moji{position:relative;  z-index:24; background-color:#FFFF00; color:#000; font-size:200%; text-decoration:none}
               span.entry{position:relative;  z-index:24; background-color:#FFFF00; color:#000; font-size:100%; text-decoration:none}

               span.SODMoji {font-size:300%; display: none; font-family: 'KanjiStrokeOrders'}
               td.SODLarge {font-size:1000%; font-family: 'KanjiStrokeOrders'}
               td.Radical {font-family: 'PGothic'}
               table.HideSOD {display: none; padding: 0}



               p {font-family: 'PGothic'; font-size: large}
               div.example {font-family: 'PGothic'; background-color: #d0d0d0}
               p.example {font-family: 'PGothic'; text-indent: -1em; margin-left: 1em}
               li.gloss {font-family: 'PGothic'; font-size:large; color: blue}
               p.gloss {font-family: 'PGothic'; font-size:large; color: blue}
               p.gloss:hover{background-color:#FFFF00}
               td.radical{font-family: 'PGothic'}

            </style>
            <script language="javascript">
               function SelectContents(theID)
               {
               var elt = document.getElementById(theID);
               var r = document.body.createTextRange();
               r.moveToElementText(elt);
               r.select();
               }

               function OnMouseOver(theID)
               {
               var theMoji = document.getElementById(theID);
               var theSOD = document.getElementById(theID+'_SOD');
               theSOD.style.display="block";
               theSOD.style.position="absolute";
               theSOD.style.border="1px solid #000";
               theSOD.style.backgroundColor="#d0d0d0";
               theSOD.style.color="#000";
               if (theID == 'theEntryID')
               {
               theSOD.style.left="1em";
               theSOD.style.top="0.5em";
               }
               else
               {
               var offsetBottom = theMoji.offsetParent.offsetHeight - theMoji.offsetTop - theMoji.offsetHeight - theSOD.offsetHeight/2;
               theSOD.style.bottom = offsetBottom;
               window.status = "bottom: "+offsetBottom;
               theSOD.style.left="4em";
               window.status = theID;
               }
               theSOD.style.zIndex="25";
               }

               function OnMouseOut(theID)
               {
               document.getElementById(theID+'_SOD').style.display="none";
               window.status = '';
               }
            </script>
         </head>
         <body >
            <!-- Write the Entry portion.  Examples don't include the kana / POS so those are optional -->
            <p>
               <span id="theEntryID" class="entry" onmouseover="OnMouseOver('theEntryID')" onmouseout="OnMouseOut('theEntryID')" >
                  <xsl:for-each select="root/kanji">
                     <xsl:value-of select="."/>
                     <xsl:if test="position()!=last()">
                        <xsl:text> / </xsl:text>
                     </xsl:if>
                  </xsl:for-each>

                  <xsl:if test="(string(root/kana))">
                     <xsl:text> (</xsl:text>
                     <xsl:for-each select="root/kana">
                        <xsl:value-of select="."/>
                        <xsl:if test="position()!=last()">
                           <xsl:text> / </xsl:text>
                        </xsl:if>
                     </xsl:for-each>
                     <xsl:text>)</xsl:text>
                  </xsl:if>
               </span>
               <!-- The Stroke Order Diagram of the entry (content is the same as the entry)-->
               <span class="SODMoji" id="theEntryID_SOD" >
                  <xsl:for-each select="root/kanji">
                     <xsl:value-of select="."/>
                     <xsl:if test="position()!=last()">
                        <xsl:text> / </xsl:text>
                     </xsl:if>
                  </xsl:for-each>

                  <xsl:if test="(string(root/kana))">
                     <xsl:text> (</xsl:text>
                     <xsl:for-each select="root/kana">
                        <xsl:value-of select="."/>
                        <xsl:if test="position()!=last()">
                           <xsl:text> / </xsl:text>
                        </xsl:if>
                     </xsl:for-each>
                     <xsl:text>)</xsl:text>
                  </xsl:if>
               </span>

               <xsl:if test="(string(root/pos))">
                  <xsl:text> [</xsl:text>
                  <xsl:value-of select="root/pos"/>
                  <xsl:text>]</xsl:text>
               </xsl:if>
            </p>
            <!-- Write the Gloss.  If there are > 1 of them, number the list -->
            <xsl:choose>
               <xsl:when test="count(root/gloss)>1">
                  <ol>
                     <xsl:for-each select="root/gloss">
                        <li class="gloss">
                           <xsl:value-of select="."/>
                        </li>
                     </xsl:for-each>
                  </ol>
               </xsl:when>
               <xsl:otherwise>
                  <xsl:for-each select="root/gloss">
                     <p class="gloss">
                        <xsl:value-of select="."/>
                     </p>
                  </xsl:for-each>
               </xsl:otherwise>
            </xsl:choose>
            <!-- Write the Examples (not present if the entry itself is an example). -->
            <div class="example">
               <xsl:for-each select="root/usage">
                  <p class="example">
                     <xsl:value-of select="."/>
                  </p>
               </xsl:for-each>
            </div>
            <!-- Write the Kanji details. -->
            <xsl:for-each select="root/kanjidetail">
               <p>
                  <!-- the character itself -->
                  <span class="moji">
                     <xsl:attribute name="onmouseover">
                        <xsl:text>OnMouseOver('</xsl:text>
                        <xsl:text>mojiID</xsl:text>
                        <xsl:value-of select="position()" />
                        <xsl:text>')</xsl:text>
                     </xsl:attribute>
                     <xsl:attribute name="id">
                        <xsl:text>mojiID</xsl:text>
                        <xsl:value-of select="position()" />
                     </xsl:attribute>
                     <xsl:attribute name="onmouseout">
                        <xsl:text>OnMouseOut('</xsl:text>
                        <xsl:text>mojiID</xsl:text>
                        <xsl:value-of select="position()" />
                        <xsl:text>')</xsl:text>
                     </xsl:attribute>
                     <xsl:attribute name="id">
                        <xsl:text>mojiID</xsl:text>
                        <xsl:value-of select="position()" />
                     </xsl:attribute>
                     <xsl:value-of select="moji"/>
                  </span>
                  <!-- the special CSS/JS-based tooltip gives the Stroke Order Diagram and radical break down-->
                  <table class="HideSOD" >
                     <xsl:attribute name="id">
                        <xsl:text>mojiID</xsl:text>
                        <xsl:value-of select="position()" />
                        <xsl:text>_SOD</xsl:text>
                     </xsl:attribute>
                     <tr>
                        <td class="SODLarge">
                           <xsl:value-of select="moji"/>
                        </td>
                        <td class="Radical">
                           <xsl:for-each select="radical">
                              <p>
                                 <xsl:value-of select="."/>
                              </p>
                           </xsl:for-each>
                        </td>
                     </tr>
                  </table>
                  <xsl:value-of select="post_moji"/>
               </p>
            </xsl:for-each>
         </body>
      </html>
   </xsl:template>
</xsl:stylesheet>